<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>智慧园区</title>
    <link rel="stylesheet/less" href="./css/showData.less" type="text/css">
    <link rel="stylesheet/less" href="./css/left.less" type="text/css">
    <link rel="stylesheet/less" href="./css/center.less" type="text/css">
    <link rel="stylesheet/less" href="./css/right.less" type="text/css">
    <link rel="stylesheet/less" href="./css/consumption.less">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
    ::-webkit-scrollbar/*整体部分*/
    {
        width: 4px;
        height:11px;
    }

    ::-webkit-scrollbar-track/*滑动轨道*/
    {
        border-radius: 6px;
        background: #11141B;
        border-left:none;
    }

    ::-webkit-scrollbar-thumb/*滑块*/
    {
        border:none;
        border-radius: 5px;
        background: #707276;
    }

    ::-webkit-scrollbar-thumb:hover/*滑块效果*/
    {
        border-radius: 3px;
        border:1px solid #707276;
        background:#707276;
    }
</style>

<body>
    <div class="container">
        <div class="getAllOperationGroup">
            <div class="content">
                <div class="titles">维保人员选择</div>
                <div class="operatorItem"></div>
                <div class="buttonGroup">
                    <button class="confirm">
                        确认
                    </button>
                    <button class="cancel">
                        取消
                    </button>
                </div>
            </div>
            <div class="contentModal" style="display:none">
                <div class="item">
                    <img src="./img/radio.png" class="icon" alt="">
                    <div class="name"></div>
                </div>
            </div>
        </div>
        <div class="successBig">
            <div class="success">
                <img src="./img/success.png" alt="">
                操作成功
            </div>
        </div>
        <div class="left secondLevel">
            <div class="resourceUseStatus">
                <p style="height:1vh;"></p>
                <div class="title btn-group">
                    <button class="focus" id='0'>资源使用情况</button>
                    <button class="nofocus" id='1'>使用率</button>
                </div>
                <div style="width: 17.5vw;height:25.2vh;position: absolute;top:4.6vh;" id="resourceUseStatusMap"></div>
                <div class="useItem" style="display: none;">

                </div>
                <div id="useItemModal" style="display: none">
                    <div class="item">
                        <div class="name"></div>
                        <div class="line">
                            <div class="line1"></div>
                        </div>
                        <div class="precent"></div>
                    </div>
                </div>
            </div>
            <div class="serviceTimes">
                <div class="title small">服务次数</div>
                <div style="width: 17.5vw;height:28.2vh;position: absolute;top:4.6vh;" id="serviceTimes"></div>
            </div>
            <div class="changeClassDaily" style="overflow: hidden;position: relative;">
                <div style="padding-bottom: 10vh;">
                    <div class="title small">换班宿舍</div>
                    <div class="wholeDay">
                        <div class="title">全天</div>
                        <div class="content whole">
                            <div class="peopleNumber">
                                <div class="icon"></div>
                                <div>
                                    <p>入住人数</p>
                                    <p class="number"></p>
                                </div>
                            </div>
                            <div class="motherNumber">
                                <div class="icon"></div>
                                <div>
                                    <p>孕妇人数</p>
                                    <p class="yunfu"></p>
                                </div>
                            </div>
                            <div class="homePercent">
                                <div class="icon"></div>
                                <div>
                                    <p>入住率</p>
                                    <p class="rate"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="noon">
                        <div class="title">中午</div>
                        <div class="content noon">
                            <div class="peopleNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                            <div class="manNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                            <div class="womanNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                        </div>
                    </div>
                    <div class="night">
                        <div class="title">晚上</div>
                        <div class="content night">
                            <div class="peopleNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                            <div class="manNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                            <div class="womanNumber">
                                <div class="circel"></div>
                                <div class="word"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meetingRoomDaily">
                <div class="lefts">
                    <div class="title small">会议室</div>
                    <div style="width: 5vw;height:5vw;position: absolute;top:2.6vh;left:2vw;" id="meetingRoomDailyLeft"></div>
                    <div class='info'></div>
                </div>
                <div class="rights">
                    <div class="title small">商住房</div>
                    <div style="width: 5vw;height:5vw;position: absolute;top:2.6vh;left:2vw;" id="meetingRoomDailyRight"></div>
                    <div class='info'></div>
                </div>
                <div class="bottom">
                    <div class="title small">商业运营</div>
                    <div class="dataItem">
                        <div class="item">
                            <div class="left" id="consumemoney"></div>
                            <div class="right" id="crecharge"></div>
                        </div>
                        <div class="item">
                            <div class="left" id="subconsumemoney"></div>
                            <div class="right" id="surplussubmoney"></div>
                        </div>
                        <div class="item">
                            <div class="left" id="wrecharge"></div>
                            <div class="right"></div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="consumeDaily">
                <div class="title btn-group">
                    <button class="focus" consumeId='0'>日消费统计</button>
                    <button class="nofocus" consumeId='1'>日消费运营表</button>
                </div>
                <div style="width: 32vw;height:28.2vh;position: absolute;top:4.6vh;" id="consumeDaily"></div>
            </div>
        </div>
        <div class="center secondLevel">
            <p style="height: 2vh;"></p>
            <div class="title"></div>

            <div class="dateTime">
                <div class="time"></div>
                <div class="day"></div>
                <div class="date"></div>
            </div>
            <div class="map">
                <img src="./img/map.png" alt="">
                <div id="point1" class="point">
                    <div class="containers">
                        <span class="word">洛阳智慧园区</span>
                        <img src="./img/light.gif" alt="">
                    </div>
                </div>
                <div id="point2" class="point">
                    <div class="containers">
                        <span class="word">淮安智慧园区</span>
                        <img src="./img/light.gif" alt="">
                    </div>
                </div>
            </div>
            <div class="alert">
                <div class="btn-group">
                    <button class="focus" id='0'>全部</button>
                    <button class="nofocus" id="1">商住房</button>
                    <button class="nofocus" id="5">会议室</button>
                    <button class="nofocus" id="2">故障</button>
                    <!-- <button class="nofocus" id="3">投诉</button>
                    <button class="nofocus" id="4">保修</button> -->

                </div>
                <div class="alertItem" style="overflow:hidden;">
                    <div class="alertItems">
                        <!-- <div class="loading">正在加载...</div>
                        <div class="nodata" style="display:none;">暂无数据...</div> -->
                    </div>
                </div>
                <div class="alertItemMode ">
                    <div class="item" style="display: none;">
                        <img src="./img/laba.png" alt="" style="width: 1vw;" class="icon">
                        <div class="word">
                            <p class="baseInfo"></p>
                            <p class="detailInfo"></p>
                        </div>
                        <img src="./img/arrow.png" alt="" style="width: 1vw;" class="arrow">

                        <div class="alertButtons buttons">
                            <button>派单</button>
                        </div>
                        <div class="meettingButtons buttons">
                            <button>驳回</button>
                            <button>通过</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right secondLevel">
            <div class="energyConsumption">
                <div class="title small">今日实时能耗</div>
                <div style="width: 17.5vw;height:28.2vh;position: absolute;top:4.6vh;" id="energyConsumption"></div>
            </div>
            <div class="energyConsumptionTotal">
                <div class="title small">园区楼栋能耗分布</div>
                <div style="width: 17.5vw;height:28.2vh;position: absolute;top:4.6vh;" id="energyConsumptionTotal"></div>
            </div>
            <div class="energyConsumptionCensus" style='position: relative;'>
                <!-- <select name="" id="" style='position: absolute;right: 100px;top: 10px;'>
                    <option>01</option>
                    <option>02</option>
                </select> -->
                <div class="title btn-group" id='mounthTotalBtns'>
                    <button class="focus" type='1'>能耗统计分布</button>
                    <button class="nofocus" type='2'>楼栋能耗统计分布</button>
                </div>
                <div style="width: 35vw;height:28.2vh;position: absolute;top:4.6vh;left: 3vw;" id="energyConsumptionCensus"></div>
                <div style="width: 31vw;height:28.2vh;position: absolute;top:4.6vh;left: 3vw;display: none;" id="energyMounthTotal">楼栋能耗月统计</div>
            </div>
            <div class="energyCenter" style='box-sizing: border-box;padding: 15px;position: relative;'>
                <div class="title small" style='padding-bottom: 1vh;'>动力中心能耗分布</div>
                <span id='dlpue' style='position:absolute;left:8.2vw;top:20.5vh;z-index:10;color:#fff;font-size: 12px;'></span>
                <div style="width: 17.5vw;height:28.2vh;position: absolute;top:4.6vh;" id="energyCenter">
                </div>
            </div>
            <div class="tactful">
                <div class="title small">管控策略</div>
                <div class="contrlItem">
                    <div class="item">
                        <div class="name">灯控</div>
                        <div class="time">
                            <input id='lightstarttime' type="text" class="startTime" placeholder="开始时间" value='00:00'>
                            <input type="text" class="line" placeholder="-" readonly>
                            <input id='lightendtime' type="text" class="endTime" placeholder="结束时间" value='06:00'>
                        </div>
                        <div class="radio" id='setLightBtn'>
                            <img class='on-btn' src="./img/ON.png" alt="">
                            <img style='display:none;' class='off-btn' src="./img/off.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="name"></div>
                        <div class="time">
                            <input type="text" class="startTime" placeholder="光照强度">
                            <input type="text" class="line" placeholder="-" readonly>
                            <input type="text" class="endTime" placeholder="光照强度">
                        </div>
                        <div class="radio">
                            <img src="./img/disable.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">空调</div>
                        <div class="time">
                            <input type="text" class="startTime" placeholder="开始时间">
                            <input type="text" class="line" placeholder="-" readonly>
                            <input type="text" class="endTime" placeholder="结束时间">
                        </div>
                        <div class="radio">
                            <img src="./img/disable.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">饮水机</div>
                        <div class="time">
                            <input type="text" class="startTime" placeholder="开始时间">
                            <input type="text" class="line" placeholder="-" readonly>
                            <input type="text" class="endTime" placeholder="结束时间">
                        </div>
                        <div class="radio">
                            <img src="./img/disable.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="name">充电桩</div>
                        <div class="time">
                            <input type="text" class="startTime" placeholder="开始时间">
                            <input type="text" class="line" placeholder="-" readonly>
                            <input type="text" class="endTime" placeholder="结束时间">
                        </div>
                        <div class="radio">
                            <img src="./img/disable.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div id="main" style="width: 600px;height:400px;"></div>    -->
        </div>
    </div>

    <div class="modelMask" id="app" style="display: none">
        <div class="closeModel">
            <span>
                +
            </span>
        </div>
        <div class="content">
            <div class="top_1">
                <p>现金/福利消费状况</p>
                <!--<div class="top1_selectMonth"><span class="top_1_date">选择月份：</span><span class="top_1_month">2018-09</span><span class="triangle"></span></div>-->
                <div class="top1_selectMonth subDiv5">
                    <span>选择月份：</span>
                    <el-select v-model="data1_month" @change="data1_monthChange" placeholder="请选择" size="mini" style="width: 75px; height: 30px;margin-right: 50px">
                        <el-option v-for="item in month" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div style="margin-top: 30px">
                <div id="moneyDetail" style="width: 950px;height: 400px"></div>
            </div>

            <div class="top_2 top_1">
                <p>用餐高峰统计</p>
                <!--<div class="top1_selectMonth"><span class="top_1_date">选择月份：</span><span class="top_1_month">2018-09</span><span class="triangle"></span></div>-->
                <div class="top1_selectMonth" style="margin-right: 30px">
                    <span>选择日期</span>
                    <el-date-picker @change="data2_date_change" size="mini" style="width: 140px;height: 30px;"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="data2_date" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div style="margin-top: 30px">
                <div id="moneyHigh" style="width: 950px;height: 400px"></div>
            </div>

            <div class="top_3 top_1">
                <p>现金/福利充值、消费状态</p>
                <div class="top1_selectMonth">
                    <span>选择月份</span>
                    <el-select v-model="data3_month" @change="data3_monthChange" placeholder="请选择" size="mini" style="width: 75px; height: 30px;margin-right: 50px">
                        <el-option v-for="item in month" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div style="margin-top: 30px; display: flex; height: 400px; justify-content: center">
                <div id="moneyLay" style="width: 570px;height: 400px"></div>
            </div>


            <div class="top_4">
                <p>消费运营</p>
                <div class="subDiv">
                    <div class="top4_selectMonth">
                        <span>选择日期：</span>
                        <el-date-picker @change="data4_date_change" size="mini" style="width: 140px;height: 30px;"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="data4_date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="top4_selectMonth">
                        <span>时间段：</span>
                        <span>06:00 - 14:00</span>
                    </div>
                </div>
            </div>
            <div style="margin-top: 30px">
                <div id="operate" style="width: 950px;height: 400px"></div>
            </div>


            <div class="top_5 top_4">
                <p>高峰用餐人数</p>
                <div class="subDiv5">
                    <span>选择窗口：</span>
                    <el-select v-model="data5_id" @change="data5_idChange" placeholder="请选择" size="mini" style="width: 170px; height: 30px;margin-right: 50px">
                        <el-option v-for="item in allPose" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <!--<el-dropdown size="small" @command="handleCommand5">-->
                    <!--<span class="el-dropdown-link">窗后选择：{{ data5_selectedName }}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></span>-->
                    <!--<el-dropdown-menu slot="dropdown">-->
                    <!--<el-dropdown-item v-for="item in allPose" :command="item.id">{{ item.name }}</el-dropdown-item>-->
                    <!--</el-dropdown-menu>-->
                    <!--</el-dropdown>-->
                    <div class="top4_selectMonth">
                        <span>选择日期：</span>
                        <el-date-picker @change="data5_date_change" size="mini" style="width: 140px;height: 30px;"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="data5_date" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="top4_selectMonth">
                        <span>时间段：</span>
                        <span>11:40 - 12:00</span>
                    </div>
                </div>
            </div>
            <div style="margin-top: 30px">
                <div id="peakNum" style="width: 950px;height: 400px"></div>
            </div>

            <div class="top_1 top_6">
                <p>部门就餐比</p>
                <div class="subDiv5">
                    <span>选择日期：</span>
                    <el-date-picker @change="data6_date_change" size="mini" style="width: 140px;height: 30px;"
                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="data6_date" type="date" placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>

            <div style="margin-top: 30px">
                <div id="percent" style="width: 950px;height: 400px"></div>
            </div>
        </div>
    </div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/store.js/1.3.20/store.min.js"></script>
<script src="./js/less.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    window.base_url = 'http://117.159.206.248:20888'
    window.token = 'd7e7627d-22f3-4f70-b14d-253bb3bf6e1e'

</script>
<script src="./js/ajax.js"></script>
<script src="./js/callBacks.js"></script>
<script src="./js/event.js"></script>
<script src="./js/info.js"></script>
<script src="./js/center.js"></script>
<script src="./js/echarts.common.min.js"></script>
<script src="./js/resourceUseStatusMap.js"></script>
<script src="./js/serviceTimes.js"></script>
<script src="./js/consumeDaily.js"></script>
<script src="./js/meetingRoomDaily.js"></script>
<script src="./js/energyConsumption.js"></script>
<script src="./js/energyConsumptionCensus.js"></script>
<script src="./js/energyCenter.js"></script>
<script src="./js/tactful.js"></script>
<script src="./js/manageControl.js"></script>
<script src="./js/consumptionDetail.js"></script>

</html>